<template>
  <div class="cpt-comfyui-previewmodal  ">
    <el-dialog v-model="visible" title="" @close="handleClose" :z-index="10">
      <div class="dialogcon-previewworkinfo dialogcon-previewworkinfo-ai    rounded-2xl box-border p-10">
        <div class="modes ">
          <!-- compare -->
          <div class="mode-compare flex" v-if="mode == 'compare'">
            <div class="mode-left">
              <div class="w-80 h-80" :style="{
                backgroundImage: `url(${currentWorkInfo.inputFileUrl})`,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                backgroundSize: 'contain'
              }" @click="preivewImage(currentWorkInfo.inputFileUrl)">

              </div>
            </div>
            <div class="mode-right">
              <div class="w-80 h-80" :style="{
                backgroundImage: `url(${currentWorkInfo.fileUrl})`,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                backgroundSize: 'contain'
              }" @click="preivewImage(currentWorkInfo.fileUrl)">
              </div>
            </div>
          </div>
          <!-- compare -->
          <!-- mask -->
          <div class="mode-mask w-80 h-80" v-if="mode == 'mask'">
            <div class="image-comparison mx-auto" ref="box">
              <div class="cover-image" ref="coverImage">
                <img :src="currentWorkInfo.inputFileUrl" class="h-full" alt="" />
              </div>
              <div class="slider" ref="slider" @mousedown="startChange">
                <span class="tag-icon"></span>
              </div>
              <img class="base-image" :src="currentWorkInfo.fileUrl" alt="" />
            </div>
          </div>
          <!-- mask -->
          <!-- text2img -->
          <div class="mode-text2img w-80 h-80" v-if="mode == 'text2img'">
            <div class="mode-right mx-auto">
              <div class="w-80 h-80" :style="{
                backgroundImage: `url(${currentWorkInfo.fileUrl})`,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                backgroundSize: 'contain'
              }" @click="preivewImage(currentWorkInfo.fileUrl)">

              </div>
            </div>
          </div>
          <!-- text2img -->
        </div>
        <div class="menus text-center px-4 flex">
          <div class="btn btn-compare" :class="[{ active: mode == 'compare' }]" @click="mode = 'compare'"
            v-if="mode != 'text2img'">
            对比</div>
          <div class="btn btn-mask" :class="[{ active: mode == 'mask' }]" @click="mode = 'mask'"
            v-if="mode != 'text2img'">遮罩</div>
          <div class="btn  cursor-pointer rounded-md px-2  py-1 bg-[#9DBFFB] relative" @click="downloadImage">下载</div>
        </div>


      </div>
    </el-dialog>
    <el-image-viewer v-if="showViewer" :url-list="srcList" @close="closePreivew">
    </el-image-viewer>

  </div>

</template>
<script lang="ts" setup>




import { useAppStore } from "~/stores/app";


import {  watch } from 'vue';
import { postAIAddWorkInfoDownload, postAIModifyMyWorkInfo, postAIPubWorkInfo } from "../../service/yapi";
import { ElImageViewer } from "element-plus";

const { signIn, token, data, status, lastRefreshedAt, signOut, getSession } =
  useAuth();

let app = useAppStore();
let { downloadByUrl } = app
let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentWorkInfo: {
    type: Object,
    default: () => ({
      id: "",
      inputFileUrl: "",
      fileUrl: "",

    })
  }
})
const { visible, currentWorkInfo } = toRefs(props);

let emits = defineEmits(['update:visible', 'editworkSuccess'])
watch(() => props.visible, (newVal) => {

  if (!newVal) {
    emits('update:visible', false);
  }
  if (newVal) {
    name.value = props.currentWorkInfo.name
  }
})
watch(() => props.currentWorkInfo, (newVal) => {


  if (newVal.inputFileUrl) {
    mode.value = 'compare'
  } else {
    mode.value = 'text2img'
  }
}, {
  deep: true
})
let name = ref("");
let mode = ref('mask');

let loading = ref(false);

function handleClose() {
  emits('update:visible', false);
}


let route = useRoute();

onMounted(() => {


});

let offsetX = ref(0)
let box = ref<any>(null)
let coverImage = ref<any>(null)
let slider = ref<any>(null)
let moveHandler = (e: any) => {
  slider.value.style.left = (e.pageX - offsetX.value - 4 || 0) + "px";
  coverImage.value.style.width = (e.pageX - offsetX.value || 0) + "px";

}
let endChange = () => {
  window.removeEventListener("mousemove", moveHandler);
  window.removeEventListener("mouseup", endChange);
}
let startChange = (event: any) => {
  offsetX.value = event.pageX - slider.value.offsetLeft;
  window.addEventListener("mousemove", moveHandler);
  window.addEventListener("mouseup", endChange);

}

let downloadImage = () => {

  postAIAddWorkInfoDownload({ work: props.currentWorkInfo.id })

  let workInfo = props.currentWorkInfo
  downloadByUrl({ url: workInfo?.fileUrl, id: workInfo?.id, name: workInfo?.name });
}
let showViewer = ref(false)
let srcList = ref<any>([])
let preivewImage = (url: string) => {
  srcList.value = [url]
  showViewer.value = true
  nextTick(() => {
    // 获取遮罩层dom
    let domImageMask = document.querySelector('.el-image-viewer__mask')
    if (!domImageMask) {
      return
    }
    domImageMask.addEventListener('click', () => {
      // 点击遮罩层时调用关闭按钮的 click 事件
      // @ts-ignore
      document.querySelector('.el-image-viewer__close').click()
      showViewer.value = false;
    })
  })
}
let closePreivew = () => {
  showViewer.value = false;
}
</script>
<style lang="scss">
.dialogcon-previewworkinfo {
  @apply w-189 h-125 bg-[var(--black-light)] rounded-2xl;

  z-index: 100;
  position: relative;

  &.dialogcon-previewworkinfo-ai {
    // background: #F7F7F7;
    background: transparent;


    .mode-mask {
      margin: 0 auto;
      img {
        max-width: max-content
      }

      .image-comparison {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

        * {
          user-select: none;
        }

        .slider {
          position: absolute;
          left: calc(50% - 4px);
          width: 8px;
          height: 100%;
          cursor: col-resize;
          z-index: 20;
          background: rgba(0, 0, 0, 0.5);

          .tag-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            border: 2px solid rgba(255, 255, 255, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            transform: translate(-50%, -50%);
          }
        }

        .cover-image,
        .base-image {
          position: absolute;
          left: 0;
          height: 100%;
          overflow: hidden;
        }

        .cover-image {
          left: 0;
          width: 50%;
          z-index: 20;
        }

        img {
          max-height: 100%;
        }
      }
    }

    .mode-text2img {}

    .menus {
      @apply p-t-2 flex justify-center;

      .btn {
        @apply px-3 py-0 mx-2 cursor-pointer box-border;
        background: #4E4F55;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;

        color: #AAAAAA;


        &.active {
          // @apply bg-blue-300;
          background: rgba(41, 116, 246, 0.8);


          color: #fff;
          box-shadow: 0px 2px 4px 0px rgba(27, 27, 27, 0.16);
        }
      }
    }
  }

  .left {
    @apply flex-none w-81 bg-[var(--black-base)] rounded-2xl;
  }

  .right {
    @apply bg-[var(--black-light)];

    .form {
      .line {
        @apply bg-[#323232] flex text-5 items-[flex-end] m-b-2 w-87;


        .label {
          @apply text-4.5 text-gray-300 w-20 hidden;
        }

        input {
          @apply border-none bg-transparent line-height-8 p-l-2 w-87 h-12 bg-[#323232] rounded-2xl opacity-100 text-4.5 text-black-[#4A4A4A] box-border;

        }

        input:focus {
          outline: none;
        }

        input::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.45);
        }

        .input {
          @apply text-black-[#4A4A4A] border-none;

        }
      }

      .password {
        .input {
          @apply relative w-full;

          .btn {
            @apply absolute right-2 top-2 text-5;
          }
        }
      }

      .btn-submit {
        @apply text-white text-center w-87 h-12 bg-[#755afb] line-height-12 rounded-2xl text-4.5 cursor-pointer mt-4;
      }

      .errortip {
        @apply text-red-600 mb-2;
      }
    }

    .switchtab {
      @apply mb-9 text-center text-black-[#4A4A4A] opacity-65 text-4.5 mt-2;

      .tablink {
        @apply text-purple-600 cursor-pointer;
      }
    }

    .tip {
      text-align: left;
      color: #fff;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.45);

      .wechat {
        font-weight: bold;
      }

      p {
        padding-top: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.45);
      }
    }
  }

  .right2 {
    padding-top: 20px;

    .line {
      position: relative;

      &::before {
        content: "*";
        color: var(--red);
        position: absolute;
        left: -20px;
        top: 15px;
      }
    }

    .switchtab {
      margin-bottom: 20px;
    }
  }
}

@media only screen and (min-width: 1536px) {
  .dialogcon-previewworkinfo {
    @apply w-200 h-125;
  }
}
</style>
